<template>
  <div class="download-report-data">
    <NH4>下载报告数据</NH4>
    <div class="date-range">
      <NButton :loading="loading" @click="onClickDownload">下载</NButton>
      <NInput v-bind="inputProps" v-model:value="dateRange.startDate" />
      <NInput v-bind="inputProps" v-model:value="dateRange.endDate" />
    </div>
  </div>
</template>
<script setup>
import { NButton, NH4, NInput } from 'naive-ui'
import { downloadReportData } from '@/services/get_report_data.js'
import { reactive, ref } from 'vue'
import dayjs from 'dayjs'

const inputProps = {
  type: 'date',
  placeholder: '',
}

const loading = ref(false)

const dateRange = reactive({
  startDate: dayjs().subtract(2, 'd').format('YYYY-MM-DD'),
  endDate: dayjs().subtract(1, 'd').format('YYYY-MM-DD'),
})

async function onClickDownload() {
  try {
    loading.value = true
    await downloadReportData({ ...dateRange })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.download-report-data {
  .date-range {
    display: flex;
    gap: 1rem;
  }
}
</style>
